<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
<style>
	body {
		background-color: #fff;
	}
	
	/* alert弹窗 */
	#myalert {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.8);
		z-index: 100;
	}
	
	#myalert .alert-wrapper {
		width: 240px;
		height: 150px;
		margin: 158px auto 0;
		background-color: #fff;
		border-radius: 6px;
		text-align: center;
	}
	
	#myalert .alert-wrapper .content {
		height: 103px;
	}
	
	#myalert .alert-wrapper .content img {
		margin-top: 14px;
	}
	
	#myalert .alert-wrapper .content p {
		font-size: 15px;
		color: #000;
		margin-top: 10px;
	}
	
	#myalert .alert-wrapper .control {
		height: 47px;
		line-height: 47px;
		font-size: 0;
	}
	
	#myalert .alert-wrapper .control a {
		display: inline-block;
		width: 50%;
		color: #4eaaff;
		font-size: 14px;
	}
	
	header {
		height: 40px;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	
	header h2 {
		text-align: center;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px
	}
	
	header .icon {
		width: 30px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 19px
	}
	
	header .user {
		right: 0;
		left: inherit;
		padding-right: 19px;
	}
	
	header .icon img {
		width: 12px;
	}
	
	header .user img {
		width: 20px;
	}
	
	header .user a {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	#app {
		overflow: hidden;
		position: relative;
		padding-bottom: 10%;
	}
	
	#app .tab-wrapper {
		position: absolute;
		top: 11px;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 0 7px;
	}
	
	#app .tab-wrapper .innerbox {
		font-size: 0;
		text-align: center;
		box-shadow: 0px 1px 43px rgba(0,0,0,.2);
		border-radius: 5px 5px 0 0;
		padding: 0 12px;
	}
	
	#app .tab-wrapper .innerbox div {
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-bottom: 3px;
	    z-index: 2;
	    line-height: 43px;
	}
	
	#app .tab-wrapper .innerbox div a {
		display: inline-block;
		vertical-align: top;
		width: 50%;
		font-size: 15px;
	}
	
	#app .tab-wrapper .innerbox span.bor {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 3px;
		width: 50%;
		background-color: #f3940c;
		transition: .3s linear;
	}
	
	#app .content-wrapper {
		background-color: #fff;
		padding: 0 19px;
		margin-top: 53px;
		position: relative;
		z-index: 1;
		overflow: hidden;
	}
	
	#app .content-wrapper .info {
		display: none;
		margin-top: 10px;
	}
	
	#app .content-wrapper .info .submit {
		margin-top: 19px;
		display: block;
		width: 100%;
		height: 43px;
		line-height: 43px;
		text-align: center;
		font-size: 18px;
		color: #fff;
		background-color: #f69000;
		border-radius: 5px;
		position: relative;
	}
	
	#app .content-wrapper .code .user {
		padding: 13px 0;
		border-bottom: 1px solid #ccc;
		font-size: 13px;
		-webkit-align-items: center;
		align-items: center;
	}
	
	#app .content-wrapper .code .user img {
		width: 23px;
	}
	
	#app .content-wrapper .code .user .title {
		color: #999;
		margin: 0 8px 0 13px;
	}
	
	#app .content-wrapper .code .user .value {
		color: #333;
	}
	
	#app .content-wrapper .code .user input {
		border-bottom: 1px solid #333;
	}
	
	#app .content-wrapper .code .input {
		height: 48px;
		border: 1px solid #ccc;
		border-radius: 5px;
		text-indent: 10px;
		width: 100%;
	}
	
	#app .content-wrapper .code .yzm-wrapper {
		margin: 8px 0 0;
		font-size: 0;
		-webkit-align-items: center;
		align-items: center;
	}
	
	#app .content-wrapper .code .yzm-wrapper input {
		height: 48px;
		border: 1px solid #ccc;
		border-radius: 5px;
		text-indent: 10px;
		flex: 1;
		margin-right: 9px;
	}
	
	#app .content-wrapper .code .yzm-wrapper .btn {
		width: 134px;
		height: 50px;
		line-height: 50px;
		background-color: #f9e9c3;
		color: #666;
		font-size: 15px;
		text-align: center;
		border-radius: 5px;
	}
	
	#app .content-wrapper .code .yzm-wrapper .btn.none {
		background-color: #fbf5e7;
		color: #969696;
	} 
	
	#app .content-wrapper .upload .template {
		margin: 18px 0;
	}
	
	#app .content-wrapper .upload .template img {
		width: 100%;
	}
	
	#app .content-wrapper .upload .upload-wrapper {
		width: 100%;
		border: 1px dashed #ccc;
		height: 141px;
		border-radius: 10px;
		padding: 4px;
	}
	
	#app .content-wrapper .upload .upload-wrapper .bg {
		width: 100%;
		height: 109px;
		border-radius: 10px;
		background-color: #e7f6ff;
		padding: 15px 0 17px;
	}
	
	#app .content-wrapper .upload .upload-wrapper .bg .upload {
		width: 78px;
		height: 78px;
		position: relative;
		border-radius: 50%;
		margin: 0 auto 12px;
		background-position: center;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		background-color: #666;
	}
	
	#app .content-wrapper .upload .upload-wrapper .bg .upload.none {
		background-image: url(/assets/img/daishangchuan-cheliangchaxun@2x.png);
	}
	
	#app .content-wrapper .upload .upload-wrapper .bg .upload.active {
		background-image: url(/assets/img/shangchuanchenggong-cheliangchaxun@2x.png);
	}
	
	#app .content-wrapper .upload .upload-wrapper .bg .upload .progress, #app .content-wrapper .upload .upload-wrapper .bg .upload input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	#app .content-wrapper .upload .upload-wrapper .bg .upload .progress {
		display: none;
		z-index: 1;
		text-align: center;
		line-height: 78px;
		color: #fff;
		font-size: 12px;
	}
	
	#app .content-wrapper .upload .upload-wrapper .bg .upload input {
		opacity: 0;
	}
	
	#app .content-wrapper .upload .upload-wrapper .bg .msg {
		font-size: 13px;
		text-align: center;
	}
	
</style>
</head>
<body>
	<header>
		<div class="icon flexbox" id="back"><img src="/assets/img/order_back.png" /></div>
		<h2>初审</h2>
		<div class="icon user flexbox" id="back"><a href="#"></a><img src="/assets/img/order_user.png" /></div>
	</header>
		
	<section id="app">
		<div class="tab-wrapper">
			<div class="innerbox">
				<div id="tabbox">
					<a href="javascript:;">实名认证</a>
					<a href="javascript:;">车辆定价</a>
					<span class="bor"></span>
				</div>
			</div>
		</div>
		<div class="content-wrapper" id="content">
			<div class="info code" style="display: block;">
				<div class="user flexbox">
					<img src="/assets/img/shenqingren-icon-renzheng@2x.png" />
					<span class="title">申请人：</span>
					<span clsss="value" id="name"></span>
				</div>
				<div class="user flexbox" style="border: none;">
					<img src="/assets/img/shenqingren-icon-renzheng@2x.png" />
					<span class="title">手机号：</span>
					<input class="value" id="username" />
				</div>
				<input placeholder="请输入服务密码" class="input" id="password" />
				<div class="yzm-wrapper flexbox">
					<input placeholder="请输入验证码" class="input" id="yzm" />
					<a href="javascript:;" class="btn" id="getyzm">点击获取验证码</a>
				</div>
				<a href="javascript:;" class="submit" id="firstsubmit">确认</a>
			</div>
			<div class="info upload">
				<div class="template">
					<img src="/assets/img/cheliangdingjia-zhaopianshili@2x.png" />
				</div>
				<div class="upload-wrapper">
					<div class="bg">
						<div class="upload none">
							<span class="progress">0%</span>
							<input type="file" id="file" name="imgfile" />
						</div>
						<p class="msg">拍摄或上传行驶证正面照</p>
					</div>
				</div>
				<a href="javascript:;" class="submit" id="lastsubmit">提交</a>
			</div>
		</div>
	</section>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
		$(function(){
			var app = $("#app"),
				myalert = $("#myalert"),
				accept = "image/jpg, image/jpeg, image/png, image/gif"
			
			function isReview (mark, fn) { // 是否实名认证
				axios.post("/makeprice/isReview").then(function (res) {
					var code = res.data.code,
						msg = res.data.msg
					if (fn) {
						fn(code)
					}	
					
					if (code == '1') {
						if (!mark) {
							_x.showTip(msg)
						}
					} else if (code == '0') {
						if (mark) {
							_x.showTip("请先进行实名认证！")
						}
					} else if (code == '4') {
						if (!mark) {
							$("#content .code").html("<div style='text-align: center;margin-top: 30px;'><i class='iconfont' style='font-size: 70px;color: #5cb85c;'>&#xe641;</i><p style='color: #5cb85c;margin-top: 10px;'>认证成功！</p></div>")
						}
					}
				})
			}
			
			isReview(false)
			
			var timerControl = {
            	dom: null,
            	count: 1,
            	init: function (dom) {
            		this.dom = dom
            		this.stop()
            		this.start()
            	},
            	start: function () {
            		var self = this
            		self.timer = setInterval(function(){
            			self.dom.html("请稍后" + self.count + "s...")
            			self.count++
            		}, 1000)
            	},
            	stop: function () {
            		this.count = 1
            		clearInterval(this.timer)
            	},
            	timer: null
            }
			
   			if(_x.isAndroid()){
   				accept = "image/*"
   			}
			
			$('#back').click(function(){
		    	window.history.go(-1)
		    })
		    
		    getOrderInfo()
		    
		    // 获取姓名和手机号
		    function getOrderInfo () {
				axios.post('/makeprice/getOrderInfo').then(function(res) {
					$("#name").html(res.data.name)
					$("#username").val(res.data.phone)
				})
			}
		    
		    //切换
		    $("#tabbox a").click(function(){
		    	var index = $(this).index()
		    	if (index === 1) {
		    		$(this).siblings("span").css('transform','translate3d(100%,0,0)')
		    	} else {
		    		$(this).siblings("span").css('transform','translate3d(0,0,0)')
		    	}
		    	$("#content").children().eq(index).show().siblings().hide()
		    })
            
		    $("#file").attr("accept", accept)
		    
            //上传
            function upload_file(file,fileDom, callback){
                var xhr = new XMLHttpRequest(),
                    formData = new FormData()
                    
                formData.append(fileDom.attr("name"),file);
                xhr.open("post","/aliyun/identifyCarCard",true);
                xhr.addEventListener("load",function(){
                    var result = JSON.parse(this.response);
                    callback(result)
                });

                xhr.upload.addEventListener('progress',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                    if(e.lengthComputable){//是否可以计算上传字节数
                        var percent = parseInt(e.loaded / e.total * 100); 
                        fileDom.siblings(".progress").text(percent + "%")
                    };
                });
                
                xhr.addEventListener('error',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                	_x.showTip("上传失败,请检查您的网络！");
                	fileDom.show()
                	fileDom.siblings("p.progress").hide()
                });
                
                xhr.send(formData);
            };
            
            // 获取验证码
            var mark = true
            $("#getyzm").click(function(){
            	if (!mark) return
            	var username = $("#username").val(),
	        		password = $("#password").val()
	        
				if (_x.isEmpty(username)) {
					_x.showTip("请输入手机号码！")
					return
				}
            	
            	if (!(/^1[3|4|5|7|8]\d{9}$/.test(username))) {
					_x.showTip("手机号码有误，请重新输入！")
					return
				}
	        	
	        	if (_x.isEmpty(password)) {
					_x.showTip("请输入服务密码！")
					return
				}
            	mark = false
            	var that = $(this)
            	axios.post("/makeprice/creatReportTask", _x.qsStringify({
            		username: username,
            		password: password
            	})).then(function(res){
            		if (res.data.code === "0000" || res.data.code === "0006") {
            			_x.showTip("验证码已发送，请注意查收！")
            		} else {
            			_x.showTip(res.data.msg)
            			mark = true
            		}
            	})
            })
            
            // 实名认证
            var firstMark = true
            $("#firstsubmit").click(function(){
            	if (!firstMark) {
            		return	
            	}
            	
            	var that = $(this),
            		yzm = $("#yzm").val()
            		
            	firstMark = false
            	
            	if (_x.isEmpty(yzm)) {
					_x.showTip("请输入验证码！")
					return
				}
            	
            	timerControl.init(that)
            	axios.post("/makeprice/creatReport", _x.qsStringify({
            		input: yzm
            	})).then(function(res){
            		if (res.data.code === "0000") {
            			$("#content .code").html("<div style='text-align: center;margin-top: 30px;'><i class='iconfont' style='font-size: 70px;color: #5cb85c;'>&#xe641;</i><p style='color: #5cb85c;margin-top: 10px;'>认证成功！</p></div>")
            			next()
            		} else if (res.data.code === "0006") {
            			_x.showTip("请输入新的验证码！")
            			$("#yzm").val("").attr("placeholder", "请输入新的验证码")
            			firstMark = true
            		} else {
            			_x.showTip(res.data.msg)
            			firstMark = true
            		}
            		timerControl.stop()
            		that.html("确认")
            	})
            	
            	
            })
            
            // 进入车辆定价
            function next () {
            	$("#tabbox").children("span").css('transform','translate3d(100%,0,0)')
            	$("#content").children(".code").hide().siblings().show()
            }
            
            // 识别照片
            var lastMark = true
            $("#lastsubmit").click(function(){
            	if (!lastMark) {
            		return
            	}
            	
            	isReview(true, function (code) {
            		if (code != "4") {
                		_x.showTip("请先进行实名认证！")
                		return
                	} else {
                		_x.showTip("正在识别，请稍后！")
                    	var that = $("#file"),
                    		file = that[0].files[0];
                    	if (_x.isEmpty(file)) {
                    		_x.showTip("请选择行驶证正面照！")
                    		return
                    	}
                    	lastMark = false
                    	$(this).html("<div class='textloading'></div>")
                    	upload_file(file, that, function(data) {
                    		var obj = {
                    			plate_num: data.plate_num,
                    			model: data.model,
                    			vin: data.vin,
                    			engine_num: data.engine_num,
                    			register_date: dateFormat(data.register_date)
                    		}
                    		_x.setSessionStorage("xxIdentify", obj)
                    		window.location.href = "/makeprice/carocr"
                    	})
                	}
            	})
            })
              
            function dateFormat (data) {
            	var str = ""
            	for (var i = 0; i < data.length; i++) {
            		str += data[i]
            		if (i === 3 || i === 5) {
            			str += "-"
            		}	
            	}
            	return str
            }
		})
	</script>
</body>
</html>
